<template>
	<view class="meal" @click="goDishesDetails">
		<view class="icons" v-if="showRanking">
			<image v-if="index == 0" style="width: 40rpx;height: 48rpx;" src="@/static/images/icons/1.png" mode="">
			</image>
			<image v-else-if="index == 1" style="width: 40rpx;height: 48rpx;" src="@/static/images/icons/2.png" mode="">
			</image>
			<image v-else-if="index == 2" style="width: 40rpx;height: 48rpx;" src="@/static/images/icons/3.png" mode="">
			</image>
		</view>

		<view class="" v-if="item.comboId">
			<view class="" style="width: 190rpx;height: 190rpx;">
				<image v-if="item.coverImage && JSON.parse(item.coverImage).length > 0" class="img_b" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;"
					:src="JSON.parse(item.coverImage)[0].url" mode="aspectFill"></image>
			</view>
			<view class="combo flex_between" style="">
				<view class="txt f18">
					{{item.comboName}}
				</view>
				<view class="describe f18">
					销量:{{item.saleAllNum}}
				</view>
			</view>
		</view>
		<view v-else-if="item.foodId" class="">
			<view class="" style="width: 190rpx;height: 190rpx;">
				<image v-if="item.image && JSON.parse(item.image).length > 0" class="img_b" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;"
					:src="JSON.parse(item.image)[0].url" mode="aspectFill">
				</image>
			</view>

			<view class="combo flex_between" style="">
				<view class="txt f18">
					{{item.foodName}}
				</view>
				<view class="describe f18">
					销量:{{item.saleAllNum}}
				</view>
			</view>
		</view>
		<uni-popup ref="comboPopup" type="bottom" class="">
			<comboDetailsView v-if="comboId" @closePopup="closePopup" :comboId="comboId" :showShopping="false" />
		</uni-popup>
	</view>
</template>

<script>
	import comboDetailsView from '@/components/common/comboDetailsView.vue'
	export default {
		components: {
			comboDetailsView
		},
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			index: {
				type: Number,
				default: null
			},
			showRanking: {
				type: Boolean,
				default: true
			},
			availablePreview: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				comboId: ''
			}
		},
		methods: {
			closePopup() {
				this.$refs.comboPopup.close()
				this.comboId = null
			},
			goDishesDetails() {
				if (!this.availablePreview) return
				if (this.item.foodId) {
					// 菜品
					this.$tab.navigateTo(
						`/pages/reserve/dishesDetails?id=${this.item.foodId}`
					)
				} else if (this.item.comboId) {
					this.comboId = this.item.comboId
					this.$nextTick(() => {
						this.$refs.comboPopup.open()
					})
					// 套餐
					// this.$emit('comboDetails', this.item)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.meal {
		position: relative;

		.icons {
			position: absolute;
			left: 4rpx;
			top: 0;
			z-index: 9;
			width: 40rpx;
			height: 48rpx;
		}

		.img_b {}

		.combo {
			margin-top: 8rpx;

			.txt {
				font-size: 24rpx;
			}
		}

		.describe {
			margin-top: 4rpx;
			font-size: 16rpx;
			/* 次要 */
			// color: #848484;
		}
	}
</style>